<template>
	<view class="pingduo-center">
		<view class="pingduo-title">
			期货合约列表
		</view>
		<view class="pingduo-form">
			<view class="pingduo-form-row">

				<view style="flex: 1;">
					合约
				</view>
				<view style="flex: 1;">
					名称
				</view>
				<view style="flex: 1;">
					操作
				</view>
			</view>
			<view style="height: 1200rpx;overflow: auto;">
				<checkbox-group @change="checkboxChange">
					<view class="pingduo-form-row" v-for="(item,index) in contractList" :key="index">
						<view style="flex: 1;">
							{{item.I}}

						</view>
						<view style="flex: 1;">
							{{item.N}}
						</view>
						<view style="flex: 1;">
							<checkbox :value="item.I" />
						</view>
					</view>
				</checkbox-group>

			</view>

		</view>


		<view class="buts">
			<!-- <view class="but but1" @click="cancePopup()">
				取消
			</view> -->
			<view class="but but2" @click="contract()">
				确认
			</view>
		</view>
	</view>
</template>
<script>
	import Socket1 from '@/utils/ws1.js'
	export default {
		data() {
			return {
				// 合约列表
				contractList: [],
				checkboxList: []
			}
		},
		onLoad() {
			let data = (uni.getStorageSync('ISS') && JSON.parse(uni.getStorageSync(
				'ISS'))) || [];


			console.log(data, '=======>data000000000')

			this.contractList = data;
		},
		methods: {
			// 选择合约
			checkboxChange(e) {
				console.log(e.detail.value, '===>val')
				this.checkboxList = e.detail.value;
				uni.setStorageSync('checkboxList', JSON.stringify(this.checkboxList))
			},
			// 构建合约
			contract() {
				Socket1.socketTask['login1'].send({
					// data: ('S|' + 'rb2410,ag2412'),
					data: ('S|' + this.checkboxList.join(',')),
					success: () => {
						console.log("发送websocket中...");
					},
					fail: (err) => {

					}
				})

				this.$refs.contract.close()
			},
		}
	}
</script>
<style lang="scss" scoped>
	.pingduo-center {
		// width: 568rpx;
		// height: 586rpx;
		background: linear-gradient(180deg, #F2F8FF 0%, #FFFFFF 100%);
		border-radius: 16rpx;
		box-sizing: border-box;
		text-align: center;
		padding: 32rpx;

		.pingduo-title {
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.8);
			line-height: 44rpx;
			text-align: center;
			margin-top: 24rpx;
		}

		.pingduo-form {
			margin-top: 24rpx;
		}

		.pingduo-form-row {
			display: flex;
			align-items: center;
			margin-top: 24rpx;

			.pingduo-form-key {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.4);
			}

			.pingduo-form-val {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				margin-left: 48rpx;
			}

			.table {
				border-radius: 4rpx;
				background-color: #EE5953;
				font-size: 20rpx;
				line-height: 28rpx;
				width: 28rpx;
				margin-left: 8rpx;
			}
		}

		.prompt {
			width: 504rpx;
			height: 50rpx;
			background: rgba(255, 59, 48, 0.04);
			border-radius: 16rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FF3B30;
			align-items: center;
			line-height: 50rpx;
			margin-top: 24rpx;
		}

		.buts {
			display: flex;
			// justify-content: space-between;
			justify-content: center;
			align-items: center;
			margin-top: 24rpx;

			.but {
				width: 236rpx;
				height: 88rpx;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;

				text-align: center;
				line-height: 88rpx;

				&.but1 {
					background: #F4F5F7;
					color: rgba(0, 0, 0, 0.8);
				}

				&.but2 {
					background: #EE5953;
					color: #ffffff;
				}
			}
		}
	}
</style>